<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
        /* 复合属性 */
        #font-test {
            font: bolder 40px 'KaiTi';
        }

        /* line-height 行高 */
        .long-paragraph {
            line-height: 50px;
        }

        /* 块级元素：独占一行，可以设置宽高 */
        .block-element {
            background-color: aqua;
            width: 200px;
            height: 100px;
        }

        /* 行内元素：在一行内显示，不可设置宽高 */
        .inline-element {
            background-color: yellow;
            width: 50px;    /* 无效 */
            height: 300px;  /* 无效 */
        }

        /* 行内块元素：在一行内显示，可以设置宽高 */
        .inline-block-element {
            width: 200px;
            height: 100px;
        }

        /* 将块元素转换为行内元素 */
        .div-inline {
            display: inline;
            background-color: greenyellow;
        }

        /* 将行内元素转换为块元素 */
        .span-block {
            display: block;
            background-color: grey;
        }
    </style>
</head>
<body>
    <h2>复合属性：</h2>
    <p id="font-test">这是一个段落，使用 font 属性。font 属性是一个复合属性</p>

    <h2>使用 line-height 属性设置行高：</h2>
    <p class="long-paragraph">很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落很长一个段落</p>

    <h2>块元素、行内元素和行内块元素：</h2>
    <p class="block-element">这是一个段落，它属于块元素</p>
    <p class="block-element">这是一个段落，它属于块元素</p>
    <p class="block-element">这是一个段落，它属于块元素</p>
    <span class="inline-element">这是一个 span ，它属于行内元素</span>
    <span class="inline-element">这是一个 span ，它属于行内元素</span>
    <span class="inline-element">这是一个 span ，它属于行内元素</span>
    <br>
    <p>img 标签属于行内块元素：</p>
    <img src="./resources/cheems.jpg" alt="cheems" class="inline-block-element">
    <img src="./resources/cheems.jpg" alt="cheems" class="inline-block-element">
    <img src="./resources/cheems.jpg" alt="cheems" class="inline-block-element">

    <h2>块元素、行内元素和行内块元素之间可以使用 display 属性互相转换：</h2>
    <div class="div-inline">这是一个转换为行内元素的块元素 div</div>
    <div class="div-inline">这是一个转换为行内元素的块元素 div</div>
    <div class="div-inline">这是一个转换为行内元素的块元素 div</div>
    <span class="span-block">这是一个转换为块元素的行内元素 span</span>
    <span class="span-block">这是一个转换为块元素的行内元素 span</span>
    <span class="span-block">这是一个转换为块元素的行内元素 span</span>
</body>
</html>